// src/styles/header.less
@search-input-width: 200px;
// 定义一些变量
@header-height: 64px;
@header-background: #fff;

.laoyu-page-container {
  max-width: 1280px;
  margin: 24px auto;
  //margin-left: 10%;
  //margin-right: 10%;
  //margin-top: 20px;
  padding: 0 12px;
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-around;
  .header-wrapper{
    flex: 0.7;
    display: flex;       /* 启用Flex布局 */
    //flex-direction: column; /* 子元素垂直排列 */
    //position: relative; /* 父元素需要相对定位 */
    .header {

      background: @header-background;
      padding: 0;
      display: flex;
      align-items: center;
      height: @header-height;
      border-radius: 8px;
      .ant-menu {
        height: @header-height;
        background: none;
      }
      .search-input {
        width: 200px;// 设置搜索框的宽度为剩余空间
        margin-right: 16px;
        height: @header-height;
      }
    }
    .article-wrapper{
      width: 100%;

    }
  }

  .qrcode-wrapper {
    flex: 0.3;
    margin-left: 16px;
    .qrcode-meta{

      display: flex;
      align-items: center;
      background: white;
       border-radius: 8px;
      .qrcode-avatar{
        margin-left: 14px;
        width: 100px;
        height: 100px;
        padding: 10px;
      }
      .qrcode-detail{
        flex: 1;
        background: none;
      }
    }
    .qrcode-template{
      margin-top: 20px;
      width: 100%;
      .qrcode-recommend{
        width: 100%;
        cursor: pointer;
        .qrcode-recommend-list{
          width: 100%;
          padding: 0 16px;
          .qrcode-recommend-item{
            width: 100%;
            margin-top: 20px;
            .qrcode-recommend-item-img{
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              height: 320px;
            }
          }
        }
      }
      .ant-card-head-title{
        font-weight: 400;
        color: #989898;
      }
    }

  }
}
.passage-page {
  position: relative;
  padding: 0 12px;
}
.ant-card {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  position: relative;
  background: #fff;
  border-radius: 2px;
}
// 响应式调整
@media screen and (max-width: 768px) {
  .search-input {
    flex: 0 0 @search-input-width; // 固定宽度，不占用剩余空间
  }
}
// 编写样式

